HTML5增强的文件上传域

2018-01-25

在HTML5以前，HTML的文件上传域的功能具有很大的局限性，这种局限性主要体现为：1.每次只能选择一个文件进行上传。2.客户端代码只能获取被上传文件的路径，无法访问实际的文件内容

HTML5允许同时选择多文件上传，而且HTML5允许客户端JavaScript访问实际的文件内容

FileList对象与File对象

HTML5为type=“file“的<input.../>元素增加了如下两个属性。

accept：该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串，多个MIME类型字符串之间应以逗号分隔
multiple：该属性设置是否允许选择多个文件

JavaScript可以通过files属性访问type=“file”的<input.../>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问该数组内的每个File对象

File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览的所有文件的信息。File对象包含如下常用属性：

name：返回该File对象对应的文件名，不包括文件路径部分
type：返回该File对象对应的文件的MIME类型字符串
size：返回该File对象对应的文件的大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>file</title>
</head>
<body>
  浏览图片：<input type="file" name="images" id="images" multiple accept="" />
  <input type="button" value="显示文件" onclick="showDetails();" />
  <script>
    var showDetails = function(){
    var imageEle = document.getElementById("images");
    var fileList = imageEle.files;
    for (var i = 0; i < fileList.length; i++) {
        let file = fileList[i];
        div = document.createElement("div");
        div.innerHTML = "第" + (i+1) + "个文件的文件名是：" + file.name +",该文件类型是：" + file.type + ",该文件大小为：" + file.size;
        document.body.appendChild(div);
      }
    }
  </script>
</body>
</html>

不要单靠accept属性来过滤文件类型，因为这只是客户端的文件类型过滤，这种文件类型过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤

使用FileReader读取文件内容

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的文件内容。FileReader提供了如下方法：

readAsText(file,encoding): 以文本文件来读取该文件，其中encoding参数指定读取该文件时所用的字符集，该参数的默认值是UTF-8.
readAsBinaryString(file): 以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据，这样就可以通过Ajax把数据上传到服务器
readAsDataURL(file): 以DataURL方式来读取文件。这种方式也可以用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式的字符串
abort() : 停止读取

需要指出的是，FileReader的所有readXXX()方法都是异步方法，这些方法都不会直接返回读取的文件内容，程序必须以事件监听的方式来获取读取的结果。

FileReader提供了如下事件来监听读取过程

onloadstart：FileReader开始读取数据时触发该事件指定的函数
onprogress：FileReader正在读取数据时触发该事件指定的函数
onload：FileReader成功读取数据后触发该事件指定的函数
onloadend：FileReader读取数据完成后触发该事件指定的函数，无论读取成功还是读取失败都将触发该事件指定的函数
onerror：FileReader读取失败时触发该事件指定的函数

浏览文件：<input id="file1" type="file" /><br/>
  <div id="result"></div>
    <input type="button" value="读取文本文件" onclick="readText();" /><br>
    <input type="button" value="读取二进制文件" onclick="readBinary();" /><br>
    <input type="button" value="以DataURL方式读取" onclick="readURL();" /><br>
  
  <script>
    var reader = null;
    if (FileReader) {
      reader = new FileReader();
    }else{
      alert("浏览器暂不支持FileReader");
    }
    let readText = function(){
      if (/text\/\w+/.test(document.getElementById("file1").files[0].type)) {
        reader.readAsText(document.getElementById("file1").files[0],"gbk");
        reader.onload = function(){
          document.getElementById("result").innerHTML = reader.result;
        };
      }else{
        alert("你选择的文件不是文本文件！");
      }
    }
    let readBinary = function(){
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      reader.onload = function(){
        document.getElementById("result").innerHTML = reader.result;
      };
    }
    let readURL = function(){
      reader.readAsDataURL(document.getElementById("file1").files[0]);
      reader.onload = function(){
        document.getElementById("result").innerHTML = reader.result;
      };
    }
  </script>

FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>filereader prigress</title>
</head>
<body>
  浏览文件：<input type="file" id="file1" /><br>
  上传进度：<progress value="0" id="pro"></progress>
  <div id="result"></div>
  <input type="button" value="读取文本文件" onclick="readBinary();" /><br>
  <script>
    var reader =null;
    if (FileReader) {
      reader = new FileReader();
    }
    else{
      alert("浏览器暂不支持FileReader");
    }
    let readBinary = function()
    {
      reader.readAsBinaryString(document.getElementById("file1").files[0]);
      var pro = document.getElementById("pro");
      pro.max = document.getElementById("file1").files[0].size;
      reader.onprogress = function(evt){
        pro.value = evt.loaded;
      };
    }
  </script>
</body>
</html>

FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传只是把磁盘上的文件读到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到远程服务器，则可把文件数据以POST方式请求提交到远程服务器，远程服务器负责接收并解析文件数据，并把数据内容保存到服务器。